<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>徽章</title>
</head>
<body>
    <!-- 徽章可以直接放在标题内，徽章的大小会随着标题级别变化 -->
    <h1>1级标题 <span class="badge badge-secondary">New</span></h1>
    <h2>2级标题 <span class="badge badge-secondary">New</span></h2>
    <h3>3级标题 <span class="badge badge-secondary">New</span></h3>
    <h4>4级标题 <span class="badge badge-secondary">New</span></h4>
    <h5>5级标题 <span class="badge badge-secondary">New</span></h5>
    <h6>6级标题 <span class="badge badge-secondary">New</span></h6>
    <hr>
    <!-- 修改徽章的颜色 -->
    <span class="badge badge-primary">primary</span>
    <span class="badge badge-secondary">secondary</span>
    <span class="badge badge-success">success</span>
    <span class="badge badge-info">info</span>
    <span class="badge badge-warning">warning</span>
    <span class="badge badge-danger">danger</span>
    <span class="badge badge-dark">dark</span>
    <span class="badge badge-light">light</span>
    <hr>
    <!--  .badge-pill设置一个胶囊徽章 -->
    <span class="badge badge-pill badge-primary">primary</span>
    <span class="badge badge-pill badge-secondary">secondary</span>
    <span class="badge badge-pill badge-success">success</span>
    <span class="badge badge-pill badge-info">info</span>
    <span class="badge badge-pill badge-warning">warning</span>
    <span class="badge badge-pill badge-danger">danger</span>
    <span class="badge badge-pill badge-dark">dark</span>
    <span class="badge badge-pill badge-light">light</span>
    <span class="badge badge-pill badge-danger">9</span>
</body>
</html>